import React, { Component } from 'react'
import style from './index.module.scss'
export default class Banner extends Component {
    state={
        active:0
    }
    render(){
        let {list} = this.props
        return (
            <div className={style.banner}>
                <div className={style.img}>
                    {
                        list.map((item,i)=>{
                            return <img onClick={()=>this.hrefs()} key={i} src={item.url.default} style={this.state.active===i?{display:"block"}:{display:"none"}}/>
                        })
                    }
                </div>
                <div className={style.btn}>
                    {
                        list.map((item,i)=>{
                        return <span className={this.state.active===i?style.active:""} key={i} onClick={()=>this.btn(i)}></span>
                        })
                    }
                </div>
            </div>
        )
    }
    hrefs=()=>{
        console.log(111);
    }
    componentDidMount(){
        this.start()
    }
    start=()=>{
        this.timer=setInterval(()=>{
            let active=this.state.active
            active++
            if(active>this.props.list.length-1){
                active=0
            }
            this.setState({
                active
            })
        },2000)
    }
    componentWillUnmount(){
        clearInterval(this.timer)
        this.timer=null
    }
    btn=(i)=>{
        this.setState({
            active:i
        })
        clearInterval(this.timer)
        this.timer=null
        this.start()
    }
}
